.wf-map-box {
  height: 100%;
  #wf-map-container {
    height: 100%;
    #map-box {
      height: 100%;
      #smart-map-wrap {
        height: 100%;
        #smartGuessPicBox {
          height: 100%;
        }
      }
    }
  }
  .warn-top-info {
    margin: 10px 10px 0 10px;
    padding: 5px;
    border: 1px solid #FFD073;
    background: #FFF3DC;
    font-size: 12px;
    p {
      display: inline-block;
      i {
        color:#FFAA00;
        margin: 5px;
      }
    }
    a {
      margin: 0 5px;
    }
    span {
      margin: 0 5px;
    }
  }
  .wf-map-header {
    height: 50px;
    padding: 10px 20px 10px 20px;
    // display: flex;
    align-items: center;
    color: #333;
    font-size: 12px;  
    .wfmap-btn {
      float: left;
      display: inline-block;
      position:relative;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #CCCCCC;
      background-color: #fff;
      border-radius: 3px;
      margin-right: 15px;
      text-align: center;
      color: #333;
      cursor: pointer;
      i {
        margin-right: 5px;
        position: relative;
        top: 2px;
        font-size: 14px;
      }
    }
    .wfmap-btn.all-btn {
      label {
        span {
          font-size: 12px;
        }
        .ant-checkbox {
          vertical-align: baseline !important;
        }
        .ant-checkbox+span {
          position: relative;
          top: -2px;
          margin-right: 0 !important;
        }
      }
    }
    .wfmap-btn.active {
      color: #00A9FF;
      border: 1px solid #00A9FF;
    } 
    
    .descript-words-box {
      position: relative;
      top: 7px;
      display:inline-block;
      margin-left: 15px;
      .words {
        margin-right: 30px;
        vertical-align: baseline;
        i {
          color: #1BD1C5;
          margin-right: 5px;
        }
        .line {
          width: 20px;
          border-bottom: 1px solid #1bd1c5;
          position: relative;
          display: inline-block;
          margin-right: 5px;
          top: -8px;
          i {
            position: relative;
            right: -10px;
            font-size: 17px;
            top: 11px;
          }
        }
      }
    }
  
    .descript-word-hidden {
      display: none;
    }
  }
  .wf-map-header-hidden {
    display: none;
  }
  .descript-word-show {
    overflow: hidden;
  }
  .wf-map-descript-word {
    float: left;
    position: relative;
    top: 28%;
    .content-wrap {
      margin: 0 15px;
      display: inline-block;
      p {
        display: inline-block;
      }
      span {
        display: inline-block;
        margin-right: 5px;
        width: 14px;
        height: 14px;
        position: relative;
        top: 2px;
      }
      span.passed-node {
        border: 1px solid #49A8D4;
        background-color: #a9e3ff;
      }
      span.not-pass-node {
        border: 1px solid #5ABD6B;
        background-color: #BFF3C3;
      }
      span.current-node {
        border: 1px solid #F5B87B;
        background-color: #FFE8CC;
      }
      span.auto-pass-node {
        border: 1px solid #DC4446;
        background-color: #A9E2FF;
      }
      .arrow{
        width: 26px;
        border-bottom: 1px solid #DC4446;
        color: #DC4446;
        position: relative;
        top: -4px !important;
        i {
          font-size: 14px;
          position: relative;
          right: -16px;
          top: 6px;
        }
      }
      .arrow.not-pass-exit {
        color: #979797;
        border-bottom: 1px solid #979797;
      }
    }
  }

}
#container {
  #smart-map-wrap {
    background-color: #f4f4f4;
    color: #666;
  }
  #smartGuessPicBox {
    .outer-wrap-box.isFromMobile {
      display:flex;
      align-items: center;
      padding: 20px 20px;
      .rectangle {
        display: flex;
        align-items: center;
        justify-content: center;
        .content-wrap {
          .left-area {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
    .outer-wrap-box.notFromMobile {
      .rectangle {
        .content-wrap {
          .left-area {
            i,img {
              position: relative;
              top: 34%;
            }
          }
        }
      }
    }
    .outer-wrap-box {
      font-size: 12px;
      .rectangle {
        position: relative;
        width: 156px;
        height: 72px;
        background-color: #fff;
        border-radius: 8px;
        .area {
          display: inline-block;
          span {
            display: block;
          }
        }
        .content-wrap {
          width: 100%;
          height: 100%;
          .left-area {
            position: absolute;
            width: 38px;
            height: 100%;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            text-align: center;
            i {
              color: #fff;
            }
          }
          .right-area {
            position: relative;
            top: 50%;
            margin-top: -50%;
            left: 30%;
            .info-content {
              span {
                width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .right-area.loading-word {
            left: 40%;
            top: 44%;
          }
        }
        .select-node {
          position: absolute;
          bottom: -40px;
          left: 0;
          .current-wf {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 154px;
          }
          span {
            display: block;
          }
          a {
            display: inline-block;
            border-bottom: 1px solid transparent;
          }
          .select-box {
            position: absolute;
            z-index: 4;
            width: 100%;
            background-color: #fff;
            overflow: auto;
            display: none;
            left: 0;
            top: 35px;
            ul {
              padding: 5px;
              li {
                padding: 10px;
              }
              li:hover {
                background-color: #e6f7ff;
                color: black;
              }
            }
          }
          .select-box.show-panel {
            display: inline-block;
            max-height: 150px;
            .select-content {
              li {
                cursor: pointer
              }
            }
          }
        }
    
        .select-node.isFromMobile {
          position: absolute;
          bottom: 22px;
          left: 165px;
          width: 113px;
        }
        .check-others:hover {
          color: #00a9ff;
          border-bottom: 1px solid #00a9ff;
        }
        
      }
      .rectangle.unKnownNode {
        text-align: center;
        span {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #b2b2b2;
          margin: 0 2px;
          position: relative;
          top: 20px;
        }
        background-color: #f4f4f4;
      }
      .arrow-box.notFromMobile{
        display: inline-block;
        position: relative;
        .line {
          width: 75px;
        }
        .jiantou {
          position: absolute;
          top: -10px;
          font-size: 21px;     
        }
        .arrow-point-right {
          i {
            right: -6px;
          }
        }
        .arrow-point-left {
          i {
            left: -5px;
            transform: rotate(180deg);
          }
        }
        
      }
      .arrow-box.isFromMobile {
        display: inline-block;
        position: relative;
        .line {
          height: 75px;
        }
        .jiantou {
          position: absolute;
          top: -10px;
          font-size: 21px;     
        }
      }
      .arrow-last-box.notFromMobile {
        position: relative;
        .turn-arrow {
          width: 26px;
          height: 115px;
          position: absolute;
          border-radius: 4px;
          i {
            font-size: 21px;
            position: absolute;
            top: 101px;
          }
        }
        .arrow-turn-left {
          border-left: none !important;
          i {
            left: -6px; 
            transform: rotate(180deg);
          }
        }
        .arrow-turn-right {
          border-right: none !important;
          right: 0px;
          i {
            left: 8px;
          }
        }
      }
      .arrow-last-box.isFromMobile {
        height: 75px;
        border-right: none;
        .arrow-turn-down {
          border-right: none !important;
          position: relative;
          height: 75px; 
          i {
            font-size: 20px;
            position: absolute;
            bottom: -8px;
            left: -11px;
            transform: rotate(90deg);
          }
        }
      }
    }
    .outer-wrap-box.wrap-box-flex-down {
      padding: 0;
    }
    .wrap-box-flex-left {
      .rectangle{
        float: left;
        margin: 20px 0;
      }
      .arrow-box.notFromMobile, .arrow-last-box.notFromMobile {
        float: left;
        top: 50px;
      }
    }
    .wrap-box-flex-right {
      position: relative;
      right: 42px;
      .rectangle{
        float: right;
        margin: 20px 0;
      }
      .arrow-box.notFromMobile, .arrow-last-box.notFromMobile {
        float: right;
        top: 50px;
      }
    }
    .wrap-box-flex-down {
      flex-direction: column;
    }
  }
  .map-box-show {
    height: 100%;
    display: block;
    .ant-spin  {
      position: absolute;
     top: 45%;
     left: 45%;
    }
  }
  .map-box-hidden {
    height: 100%;
    display: none;
  }
}
.smart-wrap-div::-webkit-scrollbar {
  width: 1px;
}
@media screen and (max-width: 375px) {
  #wf-map-container {
    .outer-wrap-box {
      .rectangle {
        .content-wrap {
          .right-area {
            .info-content {
              span {
                width: 60px;
              }
            }
          }
        }
      }
    }
  }
}
/* 前台流程图中操作者操作信息面板 */
#wfFrontOperator-container{
  position: absolute;
  z-index: 1000;
  width: 240px;
}
#wfFrontOperator-container .wfFrontOperator-header{
  height: 30px;
  line-height: 30px;
  background: #5f5f5f;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 8px;
  font-size: 12px;
}
#wfFrontOperator-container #wfFrontOperator-main{
  box-shadow: 0 2px 5px #999;
  background: #fff;
  padding-left: 8px;
  max-height: 300px;
  overflow: auto;
  font-size: 12px;
  color: #898989;
}
#wfFrontOperator-main .operatorItem{
  padding: 8px 0;
  font-size: 12px;
  color: #898989;
  word-break: break-all;
}
#wfFrontOperator-main .operatorItem a{
  color: #898989;
  text-decoration: none;
  margin: 5px 5px 0 5px;
  display: inline-block;
}
#wfFrontOperator-main .operatorItem a:hover{
  /* color: #30b6ff; */
}
#wfFrontOperator-main .operatorItem .notOperate{
  color: #6db341;
}
#wfFrontOperator-main .operatorItem .checked{
  color: #ff7906;
}
#wfFrontOperator-main .operatorItem .operated{
  color: #30b6ff;
}

//出口条件
#line-info-box {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 12px #c0c0c0;
  border: 1px solid #bbb;
  padding: 4px;
  color: black;
  visibility: hidden;
}